---
import NavItem from "../view/NavItem.vue";
const response = await fetch("https://v1.hitokoto.cn/?c=j&c=b");
let json = await response.json();
export const prerender = true;
---

<section class="group fixed w-full top-[0] left-[0] max-h-[64px]">
  <div
    class="flex flex-row max-w-[100vw] h-100% md:translate-y-[-100%] group-hover:translate-y-[0] transition-all duration-500 z-10"
  >
    <div class="text-text basis-1/4 hidden flex-row md:flex box-border">
      <div class="w-[5px] bg-text md:ml-4 my-2"></div>
      <div class="flex flex-col text-xs p-3">
        <span>XIAODAILONG</span>
        <span>Personal Blog</span>
      </div>
    </div>
    <div
      class="text-text md:basis-2/4 flex flex-row justify-between items-center w-full px-1"
    >
      <a class="text-text" href="/blog">TA的博客</a>
      <div class="iconfont text-3xl">&#xe603;</div>
      <div class="">
        <img
          class="w-[64px] h-[64px] object-cover"
          src="https://mp-c7d1b689-cd39-420a-83f9-733c744450c6.cdn.bspapp.com/cloudstorage/133e5eb2-21a4-4882-8b34-f876cbaf84b1.png"
          alt=""
        />
      </div>
      <div class="iconfont text-3xl">&#xe603;</div>
      <a class="text-text" href="/MyUser/content/person">TA的介绍</a>
    </div>
    <div
      class="text-text basis-1/4 hidden md:flex items-center justify-end mr-6"
    >
      <div class="iconfont text-3xl">&#xe696;</div>
    </div>
  </div>
  <div
    class="w-full h-[64px] hidden md:block translate-y-[-100%] group-hover:translate-y-[-200%] transition-all duration-500"
  >
    <NavItem client:load />
  </div>
</section>
